<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-width="120px"
    class="w-full"
  >
    <el-form-item label="任务名称" prop="name">
      <el-input v-model="newFormInline.name" placeholder="请输入任务名称" />
    </el-form-item>
    <el-form-item label="编号" prop="code">
      <el-input v-model="newFormInline.code" placeholder="请输入任务编号" />
    </el-form-item>
    <el-form-item label="运行位置" prop="side">
      <el-select v-model="newFormInline.side" placeholder="请选择运行位置">
        <el-option label="服务端" :value="0" />
        <el-option label="客户端" :value="1" />
        <el-option label="定时框接" :value="2" />
      </el-select>
    </el-form-item>
    <el-form-item label="Cron表达式" prop="cron">
      <CronElementPlus
        v-model="newFormInline.cron"
        locale="zh-CN"
        class="w-full flex-row"
        @error="e => (error = e)"
      />
    </el-form-item>
    <el-form-item label="关联事件" prop="eventId">
      <el-select v-model="newFormInline.eventId" placeholder="请选择事件">
        <el-option
          v-for="option in eventOptions"
          :key="option.value"
          :label="option.label"
          :value="option.value"
        />
      </el-select>
    </el-form-item>
    <!-- 创建状态单选框，status -->
    <el-form-item label="状态" prop="status">
      <el-radio-group v-model="newFormInline.status">
        <el-radio label="0" :value="0">启用</el-radio>
        <el-radio label="1" :value="1">禁用</el-radio>
      </el-radio-group>
    </el-form-item>
    <!-- 创建执行时间选择框，nextExecutionTime -->
    <el-form-item label="执行时间" prop="nextExecutionTime">
      <el-date-picker
        v-model="newFormInline.nextExecutionTime"
        type="datetime"
        placeholder="选择执行时间"
        style="width: 100%"
      />
    </el-form-item>
    <!-- 创建最后执行时间选择框，lastExecutionTime -->
    <el-form-item label="最后执行时间" prop="lastExecutionTime">
      <el-date-picker
        v-model="newFormInline.lastExecutionTime"
        type="datetime"
        placeholder="选择最后执行时间"
        style="width: 100%"
      />
    </el-form-item>

    <el-form-item label="参数" prop="params">
      <el-input
        v-model="newFormInline.params"
        placeholder="请输入参数"
        type="text"
      />
    </el-form-item>
    <el-form-item label="备注" prop="comment">
      <el-input
        v-model="newFormInline.comment"
        type="textarea"
        :maxlength="200"
        show-word-limit
        :rows="4"
        placeholder="请输入备注，最多200字"
      />
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { ref, withDefaults } from "vue";
// 导入统一的表单规则
import { formRules } from "../componentsUtils/rule/taskRules";

const error = ref("");

const props = withDefaults(
  defineProps<{
    formInline?: any;
    title?: string;
    eventOptions?: { label: string; value: number }[];
  }>(),
  {
    formInline: () => ({
      id: 0,
      dealerID: 0,
      tenantID: 0,
      name: "",
      code: "",
      side: 0,
      cron: "0 0 * * *",
      eventId: 0,
      params: "",
      comment: "",
      status: 0,
      nextExecutionTime: "",
      lastExecutionTime: "",
      executionCount: 0
    }),
    title: "",
    eventOptions: () => [
      {
        label: "无事件",
        value: 0
      }
    ]
  }
);

const newFormInline = ref(props.formInline);
const ruleFormRef = ref();

function getRef() {
  return ruleFormRef.value;
}

defineExpose({ getRef });
</script>
